<template>
  <div class="box">
    <el-container >
      <el-container class="backs">
        <el-aside width="400px">
          <div class="no_1">
            <h3>下载全民K歌客户端</h3>
            <ul class="q1">
              <li>
                <i class="ipone_1"></i>
                iPhone版
              </li>
              <li>
                <i class="ipone_2 ipone"></i>
                Android版
              </li>
              <li>
                <i class="ipone_3 ipone"></i>
                Windows版
              </li>
              <li>
                <i class="ipone_4 ipone"></i>
                Windows主播版
              </li>
            </ul>
          </div>
        </el-aside>
        <el-aside width="400px">
          <div>
            <h3>特色产品</h3>
            <ul class="q2">
              <li>
                <i class="ipone icon_1"></i>
                QQ音乐
              </li>
              <li>
                <i class="ipone icon_2"></i>
                上传作品
              </li>
              <li>
                <i class="ipone icon_3"></i>
                上传伴奏
              </li>
            </ul>
            <ul class="q2">
              <li>QQ音乐原创音乐平台</li>
              <li>绿钻官网</li>
            </ul>
          </div>
        </el-aside>
        <el-aside width="400px">
          <div>
            <h3>合作链接 / 更多</h3>
            <ul class="q3">
              <li>CJ E&M</li>
              <li>腾讯视频</li>
              <li>手机QQ空间</li>
              <li>最新版QQ</li>
              <li>腾讯社交广告</li>
              <li>电脑管家</li>
              <li>QQ浏览器</li>
              <li>画报</li>
              <li>黄钻活动</li>
              <li>星钻</li>
              <li>腾讯微云</li>
            </ul>
            <img class="xfz" src="./img/xfzxh.png" alt="" srcset="" />
          </div>
        </el-aside>
      </el-container>
      <el-footer>
        <div>
          <ul class="forte">
            <li>关于腾讯</li>
            |
            <li>About Tencent</li>
            |
            <li>服务条款</li>
            |
            <li>用户服务协议</li>
            |
            <li>广告服务</li>
            |
            <li>腾讯招聘</li>
            |
            <li>网站导航</li>
          </ul>
          <p class="f1p">Copyright © 1998-2022 Tencent. All Rights Reserved.</p>
          <p class="f2p">腾讯公司 版权所有</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<style>
.el-header,
.el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  color: #333;
  text-align: center;
}
.el-main {
  color: #333;
  text-align: center;
  line-height: 160px;
}
body > .el-container {
  margin-bottom: 40px;
}
.ipone {
  display: block;
  margin: 0 15px 15px;
  width: 52px;
  height: 45px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  background-image: url("./img/icon.png");
}
.ipone_2 {
  background-position: -82px -10px;
}
.ipone_2:hover {
  background-position: -10px -10px;
}
.ipone_3 {
  background-position: -10px -140px;
}
.ipone_3:hover {
  background-position: -82px -140px;
}
.ipone_4:hover {
  background-position: -82px -140px;
}
.ipone_4 {
  background-position: -10px -140px;
}
.icon_1 {
  background-position: -82px -75px;
}
.icon_1:hover {
  background-position: -154px -75px;
}
.icon_2:hover {
  background-position: -82px -205px;
}
.icon_3:hover {
  background-position: -226px -140px;
}
.icon_2 {
  background-position: -10px -205px;
}
.icon_3 {
  background-position: -226px -75px;
}
.xfz {
  display: block;
  width: 144px;
}
.ipone_1 {
  display: block;
  margin: 0 5px 15px 5px;
  width: 133px;
  height: 45px;
  background: url("./img/ipone.png") no-repeat;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.q1 li {
  float: left;
  color: #999;
  font-size: 12px;
}
.q2 {
  display: flex;
  color: #999;
  font-size: 12px;
  margin-bottom: 20px;
}
.q2 li {
  padding: 0 20px;
}
.q3 {
  display: flex;
  flex-wrap: wrap;
  padding-right: 50px;
}
.q3 li {
  text-align: left;
  width: 30%;
  color: #999;
  font-size: 12px;
  margin-bottom: 12px;
}
.backs h3 {
  text-align: left;
  font-size: 15px;
  font-weight: 400;
  padding: 30px 0;
  color: #999;
}

.backs li:hover {
  color: #000;
  cursor: pointer;
}
.forte {
  width: 500px;
  margin: 0 auto;
  display: flex;
  font-size: 12px;
  color: #999;
}
.forte li {
  padding: 0 5px;
}
.f1p {
  color: #999;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
}
.f2p {
    display: block;
  color: #999;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  padding-bottom: 30px;
}
</style>